<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>OpenLayers 加载佛山地图-Demo</title>
    <script src="../lib/ol4/ol4.js"></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <style type="text/css">
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<script>
    proj4.defs('EPSG:4528', '+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=GRS80 +units=m +no_defs');

    const projection = ol.proj.get('EPSG:4528');
    // projection.setExtent([4016817.5875508003, 4.036788085391796E7, 4268085.091030078, 4.0771909782856025E7]);
    projection.setExtent([4.036788085391796E7, 4016817.5875508003, 4.0771909782856025E7, 4268085.091030078]);
    // projection.setExtent([4.030556964927313E7, 4148130.6732731904, 4.083422098750085E7, 4280648.466204042]);

    console.log(projection);

    const projectionExtent = projection.getExtent();
    const size = ol.extent.getWidth(projectionExtent) / 256;
    console.log(projectionExtent);

    const center = [
        (projectionExtent[0] + projectionExtent[2]) / 2 + 30000,
        (projectionExtent[1] + projectionExtent[3]) / 2 + 30000
    ];
    console.log(center);

    const resolutions = [
        78271.67350615951, 39135.83675440268, 19567.91837587842, 9783.95918793921, 4891.979595292524, 2445.989797646262, 1222.994898823131, 611.4974494115655, 305.74872470578276, 152.87436235289138, 76.43717985352637, 38.2185912496825, 19.10929430192194, 9.55464715096097, 4.777323575480485, 2.3886631106595546, 1.1943315553297773, 0.5971657776648887, 0.2985828888324443, 0.14929144441622216
    ];

    const matrixIds = [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19
    ];

    const origin = [3.48768E7, 1.00021E7];

    const tileGrid = new ol.tilegrid.WMTS({
        origin: origin,
        resolutions: resolutions,
        matrixIds: matrixIds
    });

    const center4326 = ol.proj.transform(center, 'EPSG:4528', 'EPSG:4326');
    console.log(center4326);

    //       http://19.128.104.232:12345/ServiceAccess/WMTS/佛山市2017年影像图（省厅17年12月下发）_WMTS_2000113/65c395ced272084b4b4c467ea23e9de8
    //       http://19.128.104.232:12345/ServiceAccess/WMTS/佛山电子地图_2018_WMTS_CGCS2000/65c395ced272084b4b4c467ea23e9de8

    // const centerPoint = points[1];
    // 121.26892766366944,37.57288129571165
    // 120.97508842613296 37.683789214163006
    const iconPoint = ol.proj.transform([121.13164419742814 ,37.67348300356116], 'EPSG:4326', 'EPSG:4528');

    const iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(iconPoint)
    });

    const iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [10, 26],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            src: '../image/position_orange.png'
        })
    });

    iconFeature.setStyle(iconStyle);

    const vectorSource = new ol.source.Vector({
        features: [iconFeature],
        wrapX: false
    });

    const iconLayer = new ol.layer.Vector({
        source: vectorSource
    });


    const map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.WMTS({
                    name: '佛山地图',
                    url:
                        'http://122.14.201.39:6080/arcgis/rest/services/KFQ_DZDTDTPM/MapServer/WMTS',
                    matrixSet: 'default028mm',
                    format: 'image/jpgpng',
                    layer: 'KFQ_DZDTZJPM',
                    projection: projection,
                    tileGrid: tileGrid,
                    style: 'default',
                    wrapX: true
                })
            }),
            new ol.layer.Tile({
                source: new ol.source.WMTS({
                    name: '佛山地图',
                    url:
                        'http://122.14.201.39:6080/arcgis/rest/services/KFQ_DZDTZJPM/MapServer/WMTS',
                    matrixSet: 'default028mm',
                    format: 'image/jpgpng',
                    layer: 'KFQ_DZDTZJPM',
                    projection: projection,
                    tileGrid: tileGrid,
                    style: 'default',
                    wrapX: true
                })
            }),
            iconLayer
        ],
        target: 'map',
        view: new ol.View({
            center: center,
            projection: projection,
            zoom: 10,
            maxZoom: 20,
            minZoom: 1,
            resolutions
        })
    });
</script>
</body>
</html>
